<template>
  <div>
    <a-select v-model="chartSelect" style="width: 180px" @change="setHourData">
      <a-select-option value="impression">展现</a-select-option>
      <a-select-option value="click">点击</a-select-option>
      <a-select-option value="cost">消费</a-select-option>
      <a-select-option value="ctr">点击率</a-select-option>
      <a-select-option value="ctProductPaySuccess">商品支付成功量</a-select-option>
      <a-select-option value="ctLiveOrderConversions">直播间成单量</a-select-option>
    </a-select>
    <div id="chart-line-main" style="height:500px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// import moment from 'moment'
export default {
  name:'chartLine',
  data() {
    return {
      dateTimeVlaue: 0,
      chartSelect:'cost',
      isFirst:true,
    }
  },
  props:{
    hourData:{
      type:Array,
      default:()=>[]
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    init(){
      this.myChart = echarts.init(document.getElementById('chart-line-main'));
      this.myChart.showLoading({
        text: 'loading',
      });
    },
    setHourData(){
      const _this = this
      // 处理数据
      // 1.获取折线图适配的总数据+获取时间区间
      let totalData = [] //账户所有数据-折线图
      let dateArr = []
      let hourData = JSON.parse(JSON.stringify(this.hourData))
      hourData.sort((a,b)=>a.hour - b.hour)
      for(let item of hourData){
        if(!totalData.find(e=>e.name == item.userName)){
          let data = []
          hourData.forEach(o=>{
            if(o.userName == item.userName){
              data.push(o[this.chartSelect] == 'number'?o[this.chartSelect]:new Number(o[this.chartSelect]).valueOf())
            }
          })
          data = data.slice(0,this.dateTimeVlaue+1)
          totalData.push({
            name: item.userName,
            type: 'line',
            data,
          })
        }
        if(!dateArr.find(e=>e.value == item.hour)){
          dateArr.push({
            title: item.hour + '时',
            value: item.hour
          })
        }
      }
      dateArr.sort((a,b)=>a.value - b.value)
      // console.log('totalData',totalData,dateArr)
      // 2.获取当前时间点+排序后的数据
      let checkTimeData = hourData.filter(e=>e.hour == this.dateTimeVlaue)
      checkTimeData.sort((a,b)=>b[this.chartSelect] - a[this.chartSelect])
      // console.log('checkTimeData',checkTimeData)

      // 3.联动（1）（2）取出前5名数据
      let seriesData = []
      let legendData = []
      for(let i=0;i<5;i++){
        let f = totalData.find(e=>e.name == checkTimeData[i].userName)
        seriesData.push(f)
        legendData.push(f.name)
      }
      // console.log('seriesData',seriesData,legendData)

      // 4.生成chart
      const options = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legendData
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          triggerEvent:true,
          axisLabel: {
            textStyle: {
              color: function(value, index) {
                if(_this.dateTimeVlaue == dateArr[index].value){
                  return '#ee6666'
                }else{
                  return '#222222'
                }
              },
            },
          },
          boundaryGap: false,
          data: dateArr.map(e=>e.title)
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData
      }
      this.myChart.hideLoading()
      this.myChart.setOption(options)
      if(this.isFirst){
        this.isFirst = false
        this.dateTimeVlaue = dateArr[dateArr.length-1].value
        this.setHourData()
        this.myChart.on('click', 'xAxis.category', function (params) {
          _this.dateTimeVlaue = dateArr[params.dataIndex].value
          _this.setHourData()
        });
      }
    }
  },
  watch:{
    hourData(e){
      if(e.length > 0){
        // this.setHourData()
      }
    }
  }
}
</script>